<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="400" height="550"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = '48px Times New Roman';

        // Center X coordinate for symmetry
        const centerX = canvas.width / 2;

        // --- 1. Draw the ceiling ---
        const ceilingY = 50;
        const ceilingHeight = 20;
        const ceilingWidth = 350;
        const ceilingX = centerX - ceilingWidth / 2;

        // Draw ceiling rectangle
        ctx.strokeRect(ceilingX, ceilingY, ceilingWidth, ceilingHeight);

        // Fill ceiling with hatch pattern
        ctx.save();
        ctx.beginPath();
        ctx.rect(ceilingX, ceilingY, ceilingWidth, ceilingHeight);
        ctx.clip(); // Clip to the rectangle area
        ctx.lineWidth = 1;
        for (let i = -ceilingHeight; i < ceilingWidth; i += 8) {
            ctx.moveTo(ceilingX + i, ceilingY);
            ctx.lineTo(ceilingX + i + ceilingHeight, ceilingY + ceilingHeight);
        }
        ctx.stroke();
        ctx.restore();


        // --- 2. Define dimensions for masses and strings ---
        const boxWidth = 120;
        const boxHeight = 60;
        const stringLength = 70;
        const boxX = centerX - boxWidth / 2;

        // --- 3. Draw Top Mass and String A ---
        const stringA_y_start = ceilingY + ceilingHeight;
        const stringA_y_end = stringA_y_start + stringLength;
        const box1_y = stringA_y_end;

        // String A
        ctx.beginPath();
        ctx.moveTo(centerX, stringA_y_start);
        ctx.lineTo(centerX, stringA_y_end);
        ctx.stroke();
        
        // Label A
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        ctx.fillText('A', centerX + 20, stringA_y_start + stringLength / 2);

        // Top Mass (Box 1)
        ctx.strokeRect(boxX, box1_y, boxWidth, boxHeight);
        ctx.textAlign = 'center';
        ctx.fillText('M', centerX, box1_y + boxHeight / 2);

        // --- 4. Draw Middle Mass and String B ---
        const stringB_y_start = box1_y + boxHeight;
        const stringB_y_end = stringB_y_start + stringLength;
        const box2_y = stringB_y_end;

        // String B
        ctx.beginPath();
        ctx.moveTo(centerX, stringB_y_start);
        ctx.lineTo(centerX, stringB_y_end);
        ctx.stroke();

        // Label B
        ctx.textAlign = 'left';
        ctx.fillText('B', centerX + 20, stringB_y_start + stringLength / 2);

        // Middle Mass (Box 2)
        ctx.strokeRect(boxX, box2_y, boxWidth, boxHeight);
        ctx.textAlign = 'center';
        ctx.fillText('M', centerX, box2_y + boxHeight / 2);
        
        // --- 5. Draw Bottom Mass and String C ---
        const stringC_y_start = box2_y + boxHeight;
        const stringC_y_end = stringC_y_start + stringLength;
        const box3_y = stringC_y_end;

        // String C
        ctx.beginPath();
        ctx.moveTo(centerX, stringC_y_start);
        ctx.lineTo(centerX, stringC_y_end);
        ctx.stroke();

        // Label C
        ctx.textAlign = 'left';
        ctx.fillText('C', centerX + 20, stringC_y_start + stringLength / 2);

        // Bottom Mass (Box 3)
        ctx.strokeRect(boxX, box3_y, boxWidth, boxHeight);
        ctx.textAlign = 'center';
        ctx.fillText('M', centerX, box3_y + boxHeight / 2);

    </script>
</body>
</html>